<template>
  <view
    class="sidebar-item"
    :class="{ active: isActive, 'with-badge': showBadge }"
    @click="handleClick"
  >
    <view class="sidebar-icon">
      <up-icon
        :name="icon.toLowerCase()"
        :size="size"
        :color="isActive ? '#1890ff' : '#666666'"
      ></up-icon>
      <view v-if="showBadge" class="sidebar-badge" :class="badgeType">
        <text v-if="badgeValue" class="badge-value">{{
          formattedBadgeValue
        }}</text>
      </view>
    </view>
    <text class="sidebar-text">{{ title }}</text>
    <view v-if="isActive" class="active-indicator"></view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 图标名称
  icon: {
    type: String,
    default: "home",
  },
  // 图标大小
  size: {
    type: [String, Number],
    default: 24,
  },
  // 菜单标题
  title: {
    type: String,
    required: true,
  },
  // 是否激活
  isActive: {
    type: Boolean,
    default: false,
  },
  // 是否显示徽章
  showBadge: {
    type: Boolean,
    default: false,
  },
  // 徽章类型: dot, count, new
  badgeType: {
    type: String,
    default: "dot",
    validator: (val) => ["dot", "count", "new"].includes(val),
  },
  // 徽章值 (仅在badgeType为count时有效)
  badgeValue: {
    type: [String, Number],
    default: "",
  },
});

const emit = defineEmits(["click"]);

// 格式化徽章值
const formattedBadgeValue = computed(() => {
  if (props.badgeType !== "count" || !props.badgeValue) return "";

  const value = parseInt(props.badgeValue);
  if (isNaN(value)) return props.badgeValue;

  // 如果数值大于99，显示99+
  return value > 99 ? "99+" : value.toString();
});

// 处理点击事件
const handleClick = () => {
  emit("click");
};
</script>

<style lang="scss" scoped>
.sidebar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  cursor: pointer;
  transition: all 0.3s ease;

  .sidebar-icon {
    position: relative;
    margin-bottom: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;

    .sidebar-badge {
      position: absolute;
      top: -6rpx;
      right: -6rpx;

      &.dot {
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background-color: #ff4d4f;
      }

      &.count {
        min-width: 28rpx;
        height: 28rpx;
        border-radius: 14rpx;
        background-color: #ff4d4f;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6rpx;

        .badge-value {
          font-size: 18rpx;
          color: #ffffff;
          font-weight: bold;
        }
      }

      &.new {
        width: 34rpx;
        height: 24rpx;
        background-color: #ff4d4f;
        border-radius: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
          content: "NEW";
          font-size: 16rpx;
          color: #ffffff;
          font-weight: bold;
          transform: scale(0.8);
        }
      }
    }
  }

  .sidebar-text {
    font-size: 24rpx;
    color: #666666;
    transition: all 0.3s ease;
  }

  .active-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 36rpx;
    border-radius: 0 6rpx 6rpx 0;
    background-color: #1890ff;
    animation: fadeIn 0.3s ease;
  }

  &.active {
    background-color: #f5f5f5;

    .sidebar-text {
      color: #1890ff;
      font-weight: 500;
    }
  }

  &:active {
    background-color: #f0f0f0;
  }

  &.with-badge {
    .sidebar-icon {
      margin-right: 6rpx;
    }
  }
}

// 添加动画
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: translateY(-50%) scale(0.5);
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}
</style>
